<template>
  <u-popup :show="show" @close="close" :round="8" customStyle="height:80vh">
    <view class="view" :class="{vh80:show}">
      <image class="close" src="@/static/icon/close.png" @click="close" />
      <XPicture defaultImgName="avatar" class="avatar" def :url="info.img" />
      <div class="nickname">{{info.username}}</div>
      <div class="list" v-if="info?.nickname">
        <div v-for="item in list">
          <div class="item" v-if="info[item.key]">
            <div class="label">{{item.label}}</div>
            <div class="value" v-if="item.key=='sex'">{{info[item.key]==1?'男':info[item.key]==2?'女':'未知' }}</div>
            <div class="value" v-else>{{info[item.key] || ''}}</div>
          </div>
        </div>
      </div>
      <div class="action" v-if="info.showAction">
        <u-button type="error" class="btn" @click="refuse">拒绝</u-button>
        <u-button type="primary" class="btn" @click="agree">同意</u-button>
      </div>
    </view>
  </u-popup>
  <Question ref="lModal" />
</template>

<script setup>
import { ref } from "vue"
const show = ref(false)
const data = ref({})
const lModal = ref()
const info = ref({
  head_img: '',
  id_card: '',
  nickname: ''
})
const list = [{
  label: '姓名',
  key: 'username'
}, {
  label: '身份证号',
  key: 'id_card'
}, {
  label: '性别',
  key: 'sex'
}, {
  label: '年龄',
  key: 'age'
}, {
  label: '电话号码',
  key: 'tel'
}, {
  label: '读者证',
  key: 'id_card'
}, {
  label: '学校名称',
  key: 'school'
}, {
  label: '年级',
  key: 'grade'
}, {
  label: '班级',
  key: 'class_grade'
}, {
  label: '微信号',
  key: 'wechat_number'
}, {
  label: '单位名称',
  key: 'unit'
}, {
  label: '备注',
  key: 'remark'
}]
// 同意
function agree() {
  // console.log(lModal.value)
  // lModal.value.open({tip: '是否发布此活动？',type: 'question',})
}
// 拒绝
function refuse() {
  // lModal.value.open({tip: '是否发布此活动？',type: 'refuse'})
}

function close() {
  show.value = false
}
function open(item) {
  info.value = item
  console.log(info.value, "info")

  show.value = true
}

defineExpose({
  open
})
</script>

<style lang="scss" scoped>
.vh80 {
  min-height: 90vh;
}
.view {
  padding: 30rpx;
  position: relative;
  .avatar {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 10rpx;
    width: 120rpx;
    height: 120rpx;
    border-radius: 50%;
  }
  .close {
    position: absolute;
    right: 30rpx;
    top: 30rpx;
    width: 40rpx;
    height: 40rpx;
  }
}
.nickname {
  margin: 16rpx 0;
  text-align: center;
}
.list {
  display: flex;
  flex-direction: column;
  .item {
    display: flex;
    justify-content: space-between;
    height: 64rpx;
    .label {
      font-size: 28rpx;
      font-family: PingFang SC, PingFang SC-Regular;
      font-weight: 400;
      text-align: left;
      color: #333333;
    }
    .value {
      font-size: 28rpx;
      font-family: PingFang SC, PingFang SC-Regular;
      font-weight: 400;
      text-align: right;
      color: #666666;
    }
  }
}

.action {
  margin-top: 30rpx;
  display: flex;
  padding: 0 30rpx;
  gap: 30rpx;
  .btn {
    height: 88rpx;
    border-radius: 16rpx;
  }
}
</style>